<template>
	<div class="recommendPages">
		<div class="recommendHeader">
			<van-nav-bar title="演出" />
		</div>
		<div class="main">
			<!-- 轮播图 -->
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
				<van-swipe-item class="div-img" v-for="it in bannerList" :key="it">
					<img :src="it" alt="banner" />
				</van-swipe-item>
			</van-swipe>
			<!-- 推荐商品 -->
			<div class="recommendCommodity">
				<div class="product-list">
					<div class="list">
						<div class="product-card" v-for="item in showList" :key="item.itemsId">
							<div class="picture"><img @click="detailed(item)" v-lazy="baseUrl + item.cover" alt="">
							</div>
							<p>{{item.project_name}}</p>
							<div class="price">
								<div class="left">
									￥<span>{{item.price_low }}</span>
								</div>
								<div class="right">
									<div class="add-cart">
										<van-icon @click="addToCart(item)" name="shopping-cart-o" color="#ffffff"
											size="0.9rem" />
									</div>
									<!-- <div class="buy" @click="detailed(item)">购买</div> -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import { addCartApi, bannerApi, showListApi } from "../../apis/recommendApi";
	export default {
		data() {
			return {
				bannerList: [],
				showList: [],
				baseUrl: 'http://127.0.0.1:15666'
			};
		},
		computed: {
			userInfo() {
				return this.$store.getters["common/user"];
			},
		},
		mounted() {
			bannerApi().then((d) => {
				this.bannerList = d.data.map((it) => {
					return "http://10.7.162.81:15666" + it.path;
				});
			});
			showListApi({
				page: 1,
				size: 36,
				city: "",
				name: ""
			}).then((d) => {
				this.showList = d.data.rows.map((it) => {
					return it;
				});
			});
		},
		methods: {
			// 添加购物车
			async addToCart(item) {
				/** 添加到购物车的接口 */
				addCartApi({
						userId: this.userInfo.id,
						price: item.price_low,
						id: item.id,
						time: Date.now(),
						count: 1,
						name: item.project_name,
						detailaddress: `${item.city_name}/${item.district_name}/${item.venue_name}`,
						bgUrl: item.cover,
					})
					.then(() => {
						this.$toast({
							message: "添加购物车成功",
							position: "bottom",
						});
					})
					.catch((d) => {
						this.$toast({
							message: "添加购物车失败",
							position: "bottom",
						});
					});
			},
			// 点击直接购买会跳转到商品详情页面
			detailed(item) {
				this.$router.push({
					name: "details",
					params: {
						id: item.id,
						type: item.project_type
					},
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	.my-swipe .van-swipe-item {
		color: rgb(0, 0, 0);
		font-size: 20px;
		line-height: 150px;
		text-align: center;
		border: 1px solid black;
		display: flex;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.main {
		height: calc(100% - 50px - 46px);
		overflow-x: hidden;
	}

	.recommendCommodity {
		.product-list {
			padding-top: 0.625rem;
			width: 100%;
			background-color: rgb(246, 246, 246);


			.list {
				width: 100%;
				padding: 0px 14px;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.product-card {
					width: 48%;
					height: 220px;
					padding: 0 10px;
					border-radius: 8px;
					background-color: white;
					flex-shrink: 0;
					margin-bottom: 14px;

					.picture {
						width: 100%;
						height: 66%;

						img {
							width: 100%;
							height: 100%;
						}
					}

					p {
						height: 10%;
						font-size: 0.65rem;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						margin: 7px 0px;
					}

					.price {
						height: 15%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left {
							font-size: 0.6rem;
							color: rgb(255, 43, 89);

							span {
								font-size: 0.85rem;
							}
						}

						.right {
							display: flex;
							height: 75%;

							.add-cart {
								width: 30px;
								height: 25px;
								text-align: center;
								line-height: 25px;
								border-top-left-radius: 15px;
								border-bottom-left-radius: 15px;
								background-color: rgb(247, 168, 3);
							}

							.buy {
								width: 30px;
								height: 25px;
								text-align: center;
								line-height: 25px;
								font-size: 0.5rem;
								border-top-right-radius: 15px;
								border-bottom-right-radius: 15px;
								background-color: rgb(255, 25, 13);
								color: #fff;
							}
						}
					}
				}
			}
		}
	}

	.recommendPages {
		height: 100%;
	}
</style>
